<template>
  <!-- 顶部位置信息、通知栏 -->
  <div class="position">
    <span>
      <i class="position__icon custom-icon custom-icon-position"></i>
    </span>
    西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
    <i class="position__notice custom-icon custom-icon-bell"></i>
  </div>
  <!-- 搜索栏 -->
  <div class="search">
    <span class="search__icon">
      <i class="custom-icon custom-icon-search"></i>
    </span>
    <span class="search__text"> 黄焖鸡米饭</span>
  </div>
  <!-- 横幅广告推广栏 -->
  <div class="banner">
    <img class="banner__img" src="/i18n/9_16/img/banner.jpg" />
  </div>
  <!-- 分类列表栏 -->
  <div class="category_list">
    <!-- 10个 -->
    <div class="category_list__item" v-for="(item, index) in categoryList" :key="index">
      <img class="category_list__item__img" :src="item.imgUrl" />
      <p class="category_list__item__desc">{{ item.title }}</p>
    </div>
  </div>
  <!-- 灰色留白分隔栏 -->
  <div class="gap"></div>
</template>

<script>
  export default {
    name: 'StaticPart',
    setup() {
      const categoryList = [
        {
          imgUrl: '/i18n/9_16/img/category_list/超市.png',
          title: '超市便利'
        },
        {
          imgUrl: '/i18n/9_16/img/category_list/菜市场.png',
          title: '菜市场'
        },
        {
          imgUrl: '/i18n/9_16/img/category_list/水果店.png',
          title: '水果店'
        },
        {
          imgUrl: '/i18n/9_16/img/category_list/鲜花.png',
          title: '鲜花绿植'
        },
        {
          imgUrl: '/i18n/9_16/img/category_list/医药健康.png',
          title: '医药健康'
        },
        {
          imgUrl: '/i18n/9_16/img/category_list/家居.png',
          title: '家居时尚'
        },
        {
          imgUrl: '/i18n/9_16/img/category_list/蛋糕.png',
          title: '烘焙蛋糕'
        },
        {
          imgUrl: '/i18n/9_16/img/category_list/签到.png',
          title: '签到'
        },
        {
          imgUrl: '/i18n/9_16/img/category_list/大牌免运.png',
          title: '大牌免运'
        },
        {
          imgUrl: '/i18n/9_16/img/category_list/红包.png',
          title: '红包套餐'
        }
      ]
      return { categoryList }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/viriables';
  @import '@/style/mixins';
  .position {
    //文字显示省略号配置
    @include ellipsis;
    // 其他一般设定
    position: relative;
    padding: 0.16rem 0.24rem 0.16rem 0;
    line-height: 0.22rem;
    font-size: 0.16rem;
    color: $content-font-color;
    .position__icon {
      position: relative;
      top: 0.01rem;
      font-size: 0.2rem;
      margin-right: 0.08rem;
    }
    .position__notice {
      top: 0.17rem;
      right: 0;
      position: absolute;
      font-size: 0.2rem;
    }
  }

  .search {
    margin-bottom: 0.12rem;
    line-height: 0.32rem; //行高：将会自动撑开
    background: $search-bg-color;
    color: $search-font-color;
    border-radius: 0.16rem;
    font-size: 0.14rem;
    &__icon {
      display: inline-block;
      padding: 0 0.05rem 0 0.16rem;
      font-size: 0.15rem;
    }
    &__text {
      display: inline-block;
      font-size: 0.14rem;
    }
  }
  .banner {
    height: 0%;
    overflow: hidden;
    padding-bottom: 25%; //屏幕宽度的25%
    &__img {
      width: 100%;
    }
  }
  .category_list {
    display: flex; //flex布局:弹性盒
    flex-wrap: wrap; //让弹性盒元素在必要的时候拆行
    margin-top: 0.16rem;
    &__item {
      width: 20%;
      &__img {
        display: block;
        width: 0.4rem;
        height: 0.4rem;
        margin: 0 auto;
      }
      &__desc {
        margin: 0.06rem 0 0.16rem 0;
        text-align: center;
        color: $content-font-color;
      }
    }
  }
  .gap {
    height: 0.1rem;
    background: $content-bg-color;
    margin: 0 -0.18rem;
  }
</style>
